<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>城市联动</title>
</head>
<body>

    <select>
        <option>---请选择---</option>
        {% for i in citys %}
            <option value="{{ i.id }}">{{ i.name }}</option>
        {% endfor %}

    </select>

    <script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        
        $('select').live('change',function(){

            var id=$(this).val()

            $(this).nextAll().remove()

            $.get('{% url "getcity" %}',{'id':id},function(data){

                if(data.length == 0 ){ return }


                var se=$('<select></select>')

                var op='<option>--请选择--</option>'

                for(var i=0;i<data.length;i++){

                    op+='<option value="'+data[i]['id']+'">'+data[i].name+'</option>'

                }

                se.html(op)

                $('body').append(se)


            },'json')


        })

    </script>
</body>
</html>